<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
  <meta charset="UTF-8">
  <title>title</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>
<div class="container-fluid">
  <h1>学生表</h1>
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
    新增学生
  </button>

  <form class="form-inline">
    <div class="form-group">
      <label for="searchName">请输入名字</label>
      <input type="text" class="form-control" id="searchName" placeholder="请输入名称" name="searchName">
    </div>

    <button type="button" class="btn btn-default btn-primary" onclick="search();">查询</button>
  </form>


  <table class="table table-bordered" id="student">

  </table>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">学生信息</h4>
      </div>
      <div class="modal-body">


        <form id="formStudent">
          <input hidden="hidden" id="id" name="id"/>
          <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
          </div>
          <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="密码">
          </div>
          <div class="form-group">
            <label for="sex">性别</label>
            <select class="form-control" id="sex" name="sex">
              <option value="1">男</option>
              <option value="2">女</option>
            </select>
          </div>
          <div class="form-group">
            <label for="score">成绩</label>
            <input type="text" class="form-control" id="score" name="score" placeholder="成绩">
          </div>
        </form>



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">

  function search(){
    $('#student').bootstrapTable("destroy");
    loadTable();
  }
  function preAdd(){
    $("#id").val(0);
  }
  //新增或更新
  function saveStudent(){

    var data=$("#formStudent").serialize();
    var id=$("#id").val();
    if(id<1){
      //新增

      $.ajax({
        url:"/webapi/student/insert",
        method:"post",
        data:data
      }).done(function () {
        loadTable();
        $('#myModal').modal('hide')
      })
    }else{
      //跟新

      $.ajax({
        url:"/webapi/student/update",
        method:"put",
        data:data
      }).done(function () {
        loadTable();
        $('#myModal').modal('hide')
      })
    }

  }

  function editStudent(id){
    $('#myModal').modal('show')
    $.ajax({
      url:'/webapi/student/get/'+id
    }).done(function (rs) {
      $("#id").val(rs.id);
      $("#name").val(rs.name);
      $("#password").val("");
      $("#sex").val(rs.sex);
      $("#score").val(rs.score);
    })
  }


  function searchStudent(id){
    $.ajax({
      url: '/webapi/student/list'
    }).done(function (rs) {
      var mytext=document.getElementById("myText").value;
      var len = rs.length;
      var html = "";
      for (var i = 0; i < len; i++){
        //只要改变id，可以以任何条件进行查询
        if(mytext==rs[i].id){
          var item = rs[i];
          html += "<tr>"
                  + "<td>" + item.id + "</td>"
                  + "<td>" + item.name + "</td>"
                  + "<td>" + item.sex + "</td>"
                  + "<td>" + item.score + "</td>"
                  + "<td> <a herf='#' onclick='editStudent("+item.id+");'>编辑   |  </a>  <a herf='#' onclick='deleteStudent("+item.id+");'>删除</a></td>"
                  + "</tr>";}

      }
      $("#studentTb").html(html);

    })
  }

  function deleteStudent(id){
    if(confirm("是否确定删除")){
      $.ajax({
        url:"/webapi/student/delete/"+id,
        method:"delete"
      }).done(function (){
        loadTable();
      });
    }
  }
  //展示
  function loadTable(){
    /*    $.ajax({
          url: '/webapi/student/list'
        }).done(function (rs) {
          var len = rs.length;
          var html = "";
          for (var i = 0; i < len; i++) {
            var item = rs[i];
            html += "<tr>"
                    + "<td>" + item.id + "</td>"
                    + "<td>" + item.name + "</td>"
                    + "<td>" + item.sex + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "<td> <a herf='#' onclick='editStudent("+item.id+");'>编辑  |  </a>  <a herf='#' onclick='deleteStudent("+item.id+");'>删除</a></td>"
                    + "</tr>";
          }
          $("#studentTb").html(html);

        })8*/
    $('#student').bootstrapTable({
      url: '/webapi/student/getbypage',
      striped:true,
      pagination:true,
      singleSelect: false,
      pageSize:3,
      pageNumber:1,
      sidePagination: "server",
      queryParams:function(params){
        var paraObj={
          size:params.limit,
          page:params.offset/params.limit,
          sort: "id",
          direct: "desc",
          name:$("#searchName").val(),
        };

        return paraObj;
      },

      columns: [{
        field: 'id',
        title: '序号'
      }, {
        field: 'name',
        title: '姓名'
      }, {
        field: 'sex',
        title: '性别'
      },{
        field: 'score',
        title: '成绩'
      }, {
        width:120,
        align:'center',
        valign: 'middle',
        title: '编辑',
        formatter: actionFormatter,
      },]
    })
  }
  function actionFormatter(value,row,index) {
    var row1=row;
    var result = "";
    result += "<a href='#' onclick=\'editStudent("+row1.id+");'>编辑 & </a>";
    result += "<a href='#' onclick='deleteStudent("+row1.id+");'>删除</a>";
    return result;
  }
  $(function(){
    $('#stuTable').bootstrapTable("destroy");
    loadTable();
  });
  $(function() {
    loadTable();

  });

</script>
</body>
</html>

